﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Directive</title>
    <script src="../../resource/lib/jquery-1.10.2.js"></script>
    <script src="../../resource/lib/d3.js"></script>
    <script src="angular.1.2.0.min.js"></script>
    <script src="util.js"></script>
</head>
<body ng-app='svg'>

    <div id="d1" ng-controller="c1">
        <input type="button" value="Click" ng-click="clickMe();" />

        <input type="button" value="Change" ng-click="change();" />
    </div>

    
</body>
</html>
<script>
    var app = angular.module("svg", [], function () { });

    var domEl = "<div style='width: 100%' id='svgContainer'>{{value}}</div>";
    app.directive("testHtml", function () {
        var temp = {
            scope: {
                code: "=",
                value: "=",
            },
            restrict: "E",
            template: domEl,
            controller: function ($scope, $element) {
                var c = $scope.code;
                var s = $scope.value;
            }
        };
        return temp;
    })
    app.controller("c1", function ($scope, $compile, $element, $rootScope) {
        $scope.age = 1;

        $scope.clickMe = function () {
            $scope.age++;
            var keyEl = angular.element('<test-html code="' + 1111 + '" value=age></test-html>');
            $element.append(keyEl);
            $compile(keyEl)($scope);
        }

        $scope.change = function () {
            $scope.age = 100;
        }
    })
</script>
